<template>
	<div id="navigation" :class="[router]">
		<router-link to="/"><div class="nav-box">首页</div></router-link>
    
		<router-link to="/follow"><div class="nav-box">关注</div></router-link>
    
    <div class="nav-box">
      <div class="iconfont icon-box">
        &#xe602;
      </div>
     </div>
    
		<!-- <router-link to=""></router-link> -->
		<router-link to="/news"><div class="nav-box">消息</div></router-link>
		<router-link to="/personal">		<div class="nav-box">我</div></router-link>
		
	</div>
</template>

<script>
export default {
	name: 'navigation',
  data(){
    return{
      router:''
    }
  },
  
  watch:{
    '$route':'getPath'
  },
methods:{
  getPath(){
    console.log("路由---"+this.$route.path)
    let path = this.$route.path;
    if(path === '/'){
      this.router = ''
    }else{
      this.router = 'active'
    }
  }
}

};
</script>

<style scoped>
  
#navigation {
	height: 1rem;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
  z-index: 9999;
}
 .active{
  background: #000000 !important;
}
#navigation .nav-box {
	float: left;
	width: 20%;
	color: #ffffff;
	text-align: center;
	height: 1rem;
	line-height: 1rem;
	font-size: 0.3rem;
}
#navigation .iconfont-add{
  font-size: .6rem;
}
#navigation .nav-box .icon-box{
  width: 70%;
  height: .7rem;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: .1rem;
  margin: .15rem 15%;
  line-height: .7rem;
  font-size: .5rem;
  font-weight: 700;
}
</style>
